import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {
  Form,
  Input,
  Button,
  Checkbox,
  message
} from 'antd';
import {config} from 'utils';
import './Login.less';
import homebackground from '../image/back.png';
const homeImage = {
    backgroundSize: '100% 100%', //记得这里100%
    background: `url(${ homeImage })`,
    //或者下面这种也行
    backgroundImage: 'url(' + homebackground + ')'
}
const FormItem = Form.Item;

class LoginForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loading:false
    }
  }
  
  handleSubmit = (e) => {
    const hide = message.loading('正在登录...', 0);
    // Dismiss manually and asynchronously
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        const {dispatch}=this.props;
        if (!err) {
          // console.log('Received values of form: ', values);
          // const url = `${config.api}token?userName=${values.userName}&password=${values.password}`;
          // axios
          //   .get(url, values)
          //   .then((data) => {
          //     // console.log(data);
          //     if (data.data.Result) {
          //       message.success('登陆成功!' + data.data.Message);
          //       // let
          //       // user={userName:values.userName,roles:data.data.Roles,token:data.data.Token,exp
          //       // ires:data.data.Expires}; console.log(user);
          //       localStorage.setItem('user', JSON.stringify(data.data));
          //       // console.log(JSON.parse(localStorage.getItem('user')));
          //       browserHistory.push('/')
          //     } else {
          //       message.success('登陆失败!' + data.data.Message);
          //     }
          //   }); 
          dispatch({type:'user/login',payload:values});
        }
      });
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <div className="login" style={ homeImage }>
        <div className="background"></div>
        <div className="card">
          <div className="logo">
            <img alt={'logo'} src={config.whiteLogoSrc}/>
            <span>{config.name}</span>
          </div>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <FormItem>
              {getFieldDecorator('userName', {
                rules: [
                  {
                    required: true,
                    message: '用户名不能为空！'
                  }
                ]
              })(
                <Input

                  placeholder="用户名"/>
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '密码不能为空！'
                  }
                ]
              },)(
                <Input
                  type="password"
                  placeholder="密码" />
              )}
            </FormItem>
            <FormItem className="logins">
              {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true
              })(
                <Checkbox>记住我</Checkbox>
              )}
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </FormItem>
          </Form>
        </div>
      </div>
    )
  }

}

LoginForm.propTypes = {
  form: PropTypes.object,
  user: PropTypes.object,
  dispatch: PropTypes.func
}
const Login = Form.create()(LoginForm);
export default connect(({user}) => ({user}))(Login);
